<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>css选择器</title>
    <style>
      /* id选择器 */
      #box1 {
        width: 100px;
        height: 100px;
        background-color: red;
      }

      /* 类名选择器 */
      .box1 {
        width: 200px;
        height: 200px;
        background-color: green !important; /* 指定 权重值最高样式 */
      }

      /* 属性选择器 */
      /* 选择所有带有指定属性(bool)的标签 */
      [bool] {
        background-color: blue;
      }

      /* 伪类选择器 */
      #box1:hover {
        /* 鼠标放上，改变样式 */
        background-color: brown;
      }

      /* 标签选择器 */
      /* 选择所有div标签 */
      div {
        background-color: blueviolet;
      }

      /* 通配符选择器 */
      /* 选择结构中所有标签，包括body标签 */
      * {
        background-color: black;
      }

      /* 群组选择器 */
      /* 给群组中的选择器 统一添加样式 */
      div,
      span {
        background-color: aqua;
      }

      /* 子元素选择器 */
      /* 选择 div 标签内的所有 span 标签 */
      div > span {
        color: red;
      }

      /* 兄弟选择器 */
      /* 选择指定标签后相邻的第一个span兄弟标签 */
      .p-label + span {
        background-color: aquamarine;
      }

      /* 兄弟选择器 */
      /* 选择除自己以外的所有span标签兄弟元素 ↓ */
      p ~ span {
        color: yellow;
      }

      /* 注： 
      !important(最大的)
      > 内联样式(行内样式)(1000)
      > id选择器(1.0.0)
      > 类名选择器(0.1.0) = 属性选择器(0.1.0) = 伪类选择器(0.1.0)
      > 标签选择器(0.0.1)
      > *通配符选择器(0.0.0)
      */

      /* 
        没有固定权重的选择器 ####
        群组选择器:给群组中的选择器统一添加样式，并不改变权重值
        兄弟选择器：权重是 同一行的选择器权重值相加
        后代选择器：权重是 同一行的选择器权重值相加
        子元素选择器：权重是 同一行的选择器权重值相加
      */

      /*
        算法：将每条规则中，选择符对应的数相加后得到的”四位数“，从左到右进行比较，大的优先级越高。
        查看具体权重的方法: 将指针放在选择器上进行查看
        计算具体权重的方法：同一行的选择器权重值相加
      */
    </style>
  </head>
  <body>
    <!-- style：内联样式 -->
    <div id="box1" class="box1" bool="true" style="border: 1px solid red">
      <span>span</span>
      <span>span</span>
    </div>

    <p class="p-label">p标签</p>
    <span>1</span>
    <span>2</span>
    <span>3</span>
    <span>4</span>
  </body>
</html>
